<script setup>
import { ref, onMounted } from "vue";
import { queryAll, add, update, queryById, deleteDept } from '@/api/dept';
import { ElMessage, ElMessageBox } from 'element-plus';

const ruleFormRef = ref(null);
const rules = ref({
  name: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
    { min: 3, max: 20, message: '最少3个字符，最多20个字符', trigger: 'blur' },
  ]
});
// 表格中数据
const tableData = ref([]);
const dialogFormVisible = ref(false);
const dialogName = ref("");
const form = ref({
  name: ''
});

// 确定要删除吗？
const open = (row) => {
  ElMessageBox.confirm(
    '此次操作将删除整个部门信息，是否继续?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(
    async () => {
      let result = await deleteDept(row.id);
      if (result.code == 1) {
        ElMessage.success('删除部门成功！');
        search();
      } else {
        ElMessage.error('删除部门失败');
      }
    })
}
// 展示添加部门弹窗
function showDialog() {
  form.value = {};
  dialogName.value = "新增部门"
  dialogFormVisible.value = true;
}
async function showUpdateDialog(row) {
  const result = await queryById(row.id);
  if (result.code == 1) {
    form.value = result.data;
    dialogFormVisible.value = true;
    dialogName.value = "修改部门";
  } else {
    ElMessage.error("查询部门失败");
  }
}
// 添加/修改部门
const submitData = async () => {
  ruleFormRef.value.validate(async valid => {
    if (!valid) {
      return;
    }
    let result;
    if (form.value.id) {
      result = await update(form.value);
    } else {
      result = await add(form.value);
    }
    if (result.code == 1) {
      // 弹窗提示
      ElMessage.success('保存成功！');
      dialogFormVisible.value = false;
      // 重新刷新页面
      search();
    } else {
      ElMessage.error('保存失败');
      dialogFormVisible.value = false;
    }
  }
  )
}

// 部门列表查询
const search = async () => {
  let result = await queryAll();
  if (result.code == 1) {
    tableData.value = result.data;
  } else {
    ElMessage.error('查询失败')
  }
}
onMounted(() => {
  search();
})
</script>

<template>

  <div class="common-layout">
    <el-container>
      <el-header style="margin-bottom: 20px;">
        <div> <el-text class="mx-1" type="primary">部门管理</el-text></div>
        <el-button type="primary" @click="showDialog">
          <el-icon>
            <Plus />
          </el-icon>&nbsp&nbsp新增部门
        </el-button>
      </el-header>
      <el-main>
        <el-table :data="tableData" style="width: 100%" border stripe="true">
          <el-table-column type="index" label="序号" width="180" align="center" />
          <el-table-column prop="name" label="部门名称" width="180" align="center" />
          <el-table-column prop="updateTime" label="最后操作时间" align="center" />
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-button size="small" @click="showUpdateDialog(row)">
                编辑
              </el-button>
              <el-button size="small" type="danger" @click="open(row)">
                删除
              </el-button>
            </template>

          </el-table-column>
        </el-table>

        <!-- 对话框 -->

        <el-dialog v-model="dialogFormVisible" :title="dialogName" width="500" >
          <el-form :model="form" :rules="rules" ref="ruleFormRef" >
            <!-- prop绑定校验规则 -->
            <el-form-item label="部门名称" prop="name" >
              <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="submitData()">
                确认
              </el-button>
            </div>
          </template>
        </el-dialog>


      </el-main>
    </el-container>
  </div>


</template>

<style scoped>
.el-text {
  font-size: 18px;
  font-weight: 500;
  line-height: 50px;
}
</style>
